<template>
  <div class="app-container">
    <el-row type="flex" align="midden">
      <el-col :span="12">
        <el-row type="flex" :gutter="10">
          <el-col :span="6">
            <el-input v-model="customerName" clearable size="small" placeholder="客户名称/客户联系人" />
          </el-col>
          <el-col :span="6">
            <el-select v-model="classifyValue" clearable size="small" placeholder="请选择分类">
              <el-option
                v-for="item in customerClassify"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select v-model="cooperationStatusValue" clearable size="small" placeholder="合作进展">
              <el-option
                v-for="item in cooperationStatus"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col :span="2">
            <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜 索</el-button>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row type="flex" justify="end">
          <el-button size="small" type="primary" @click="handleAdd">新增客户</el-button>
          <el-button size="small" type="warning" @click="allDistribution">一键分配客户</el-button>
          <el-button size="small" type="danger" @click="allDeleteDistribution">一键解除分配客户</el-button>
          <!-- <el-button size="small" type="success" icon="el-icon-download">导 出</el-button>
          <el-button size="small" type="warning" icon="el-icon-upload2">导 入</el-button> -->
        </el-row>
      </el-col>
    </el-row>
    <div style="margin-top:20px">
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        tooltip-effect="dark"
        style="width: 100%"
        height="720px"
        max-height="720px"
        highlight-current-row
        :row-key="getRowKey"
        @selection-change="handleSelectionChange"
      >
        <el-table-column :reserve-selection="true" type="selection" align="center" width="55" />
        <el-table-column prop="name" label="客户名称" align="center" />
        <el-table-column label="机构地址" align="center" width="150px" show-overflow-tooltip>
          <template slot-scope="{row}">
            {{ row.provinceName }}{{ row.cityName }}{{ row.regionName }}{{ row.townName }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="详细地址" align="center" width="150px" show-overflow-tooltip />
        <el-table-column prop="linkman" label="客户联系人" align="center" width="100px" />
        <el-table-column prop="linkPhone" label="联系电话" align="center" width="120px" />
        <el-table-column prop="position" label="职位" align="center" />
        <el-table-column prop="categoryNames" label="经营范围" align="center" width="150px" />
        <el-table-column prop="customerTypeName" label="客户类型" align="center" />
        <el-table-column prop="cooperationStatusName" label="客户状态" align="center" />
        <el-table-column prop="customerClassifyName" label="客户分类" align="center" />
        <el-table-column label="客户资料" align="center">
          <template slot-scope="{row}">
            <el-button type="text" @click="privewRemark(row)">查看资料</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="备注" align="center" />
        <el-table-column prop="userName" label="跟进人" align="center" />
        <el-table-column label="操作" fixed="right" align="center" width="250px">
          <template slot-scope="{row}">
            <div class="operation">
              <el-button size="mini" type="primary" @click="handleModify(row)">修改资料</el-button>
              <el-button size="mini" type="success" @click="handleDescription(row)">备注</el-button>
              <el-button size="mini" type="warning" @click="handleVisit(row)">拜访记录</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(row)"> 删除</el-button>
              <el-button v-if="row.userName" size="mini" type="danger" @click="deleteDistribution(row)">解除客户分配</el-button>
              <el-button v-else size="mini" type="primary" @click="customerDistribution(row)">客户分配</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top:10px" type="flex" justify="center">
        <el-pagination
          background
          :current-page="listQuery.currentPage"
          :page-sizes="[10, 50, 100, 200]"
          :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
    <!-- 客户资料 -->
    <el-dialog
      title="客户资料"
      :visible.sync="remarkDialog"
      width="700px"
    >
      <div class="remark">
        <div class="remark" v-html="currentRow.remark" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="remarkDialog = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 备注 -->
    <el-dialog
      title="备注"
      :visible.sync="descriptionDialog"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="descriptionValue=''"
    >
      <el-input v-model="descriptionValue" size="small" placeholder="请输入备注" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="descriptionDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmDescription">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 客户分配 -->
    <el-dialog
      title="客户分配（选择员工）"
      :visible.sync="distributionDialog"
      width="400px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="closeDistribution"
    >
      <el-select v-model="distributionValue" filterable style="width:100%" clearable placeholder="请选择员工">
        <el-option
          v-for="item in distributionData"
          :key="item.userId"
          :label="item.realName"
          :value="item.userId"
        />
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="distributionDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmDistribution">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改资料 -->
    <el-dialog
      :title="isModify?'修改资料':'新增客户'"
      :visible.sync="modifyDataDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="800px"
      @close="closeModify"
    >
      <div class="modify">
        <el-form ref="modifyDataForm" :model="modifyDataForm" :rules="modifyDataRules" label-width="100px" class="demo-modifyDataForm">
          <el-form-item label="客户名称" prop="name">
            <!-- <el-input v-model="modifyDataForm.name" placeholder="请输入客户名称" /> -->
            <el-autocomplete
              v-model="modifyDataForm.name"
              class="inline-input"
              :fetch-suggestions="querySearch"
              placeholder="请输入客户名称"
              :trigger-on-focus="false"
            />
          </el-form-item>
          <el-form-item label="商户地址">
            <el-row type="flex" justify="space-between">
              <el-form-item prop="province">
                <el-select
                  v-model="modifyDataForm.province"
                  size="small"
                  style="width:160px"
                  placeholder="请选择省份"
                  @change="provinceChange"
                >
                  <el-option
                    v-for="item in addressOptions.province"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item prop="city">
                <el-select
                  v-model="modifyDataForm.city"
                  size="small"
                  style="width:160px"
                  placeholder="请选择城市"
                  @change="cityChange"
                >
                  <el-option
                    v-for="item in addressOptions.city"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item prop="region">
                <el-select
                  v-model="modifyDataForm.region"
                  size="small"
                  style="width:160px"
                  placeholder="请选择市区"
                  @change="areaChange"
                >
                  <el-option
                    v-for="item in addressOptions.area"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item prop="town">
                <el-select
                  v-model="modifyDataForm.town"
                  size="small"
                  style="width:160px"
                  placeholder="请选择街道( 可空 )"
                  @change="streetChange"
                >
                  <el-option
                    v-for="item in addressOptions.street"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-row>
          </el-form-item>
          <el-form-item label="详细地址" prop="linkman">
            <el-input v-model="modifyDataForm.address" placeholder="请输入详细地址" />
          </el-form-item>
          <el-form-item label="客户联系人" prop="linkman">
            <el-input v-model="modifyDataForm.linkman" placeholder="请输入客户联系人" />
          </el-form-item>
          <el-form-item label="联系电话" prop="linkPhone">
            <el-input v-model="modifyDataForm.linkPhone" placeholder="请输入客户联系电话" />
          </el-form-item>
          <el-form-item label="微信" prop="wxNo">
            <el-input v-model="modifyDataForm.wxNo" placeholder="请输入客户微信" />
          </el-form-item>
          <el-form-item label="联系人职位" prop="position">
            <el-input v-model="modifyDataForm.position" placeholder="请输入客户联系人职位" />
          </el-form-item>
          <el-form-item label="客户分类" prop="customerClassify">
            <el-select v-model="modifyDataForm.customerClassify" size="small" placeholder="请选择">
              <el-option
                v-for="item in customerClassify"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="客户类型" prop="customerType">
            <el-select v-model="modifyDataForm.customerType" size="small" placeholder="请选择">
              <el-option
                v-for="item in customerType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="客户状态" prop="cooperationStatus">
            <el-select v-model="modifyDataForm.cooperationStatus" size="small" placeholder="请选择">
              <el-option
                v-for="item in cooperationStatus"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="客户经营范围" prop="categoryIds">
            <el-tabs v-model="activeName">
              <el-tab-pane
                v-for="item in categoryAllList"
                :key="item.id"
                :label="item.name"
                :name="item.id"
              >
                <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll[index]" @change="handleCheckAllChange">全选</el-checkbox> -->
                <div style="margin: 15px 0;" />
                <el-checkbox-group v-model="modifyDataForm.categoryIds">
                  <el-checkbox v-for="categories in item.categories" :key="categories.id" :label="categories.id">{{ categories.name }}</el-checkbox>
                </el-checkbox-group>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
          <el-form-item label="客户资料" prop="remark">
            <!-- <tinymce v-if="modifyDataDialog" v-model="modifyDataForm.remark" :height="400" /> -->
            <el-input
              v-model="modifyDataForm.remark"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 6}"
              placeholder="请输入客户资料"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="客户资料上传" prop="attachmentList">
            <!-- <el-radio-group v-model="fileType">
              <el-radio label="1">图片</el-radio>
              <el-radio label="2">video</el-radio>
              <el-radio label="3">word</el-radio>
              <el-radio label="4">excel</el-radio>
              <el-radio label="5">pdf</el-radio>
              <el-radio label="6">其它</el-radio>
            </el-radio-group> -->
            <el-upload
              class="upload-demo"
              action="#"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="modifyDataForm.attachmentList"
              :http-request="handleAvatarRequest"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <!-- <div slot="tip" class="el-upload__tip">支持上传 <span style="font-weight:600">{{ fileAccept||'其它' }}</span> 格式文件</div> -->
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleCoustmerAdd">确 定</el-button>
        <!-- <el-button type="warning" @click="modifyDataDialog = false">草 稿</el-button> -->
        <el-button @click="modifyDataDialog = false">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
// import tinymce from '@/components/Tinymce'
import { provinceList, cityList, areaList, streetList, getCategoryAll } from '@/api/common'
import {
  customerClassifyList,
  customerTypeList,
  customerCooperationList,
  customerPageList,
  customerAdd,
  customerDeleteById,
  customerGetById,
  customerUpdateById,
  customerDescription,
  listByCustomerName,
  customerGetUsers,
  customerBatchAdd,
  deleteBatchByCustomerIds
} from '@/api/customer'
export default {
  name: 'CustomerList',
  // components: { tinymce },
  data() {
    return {
      currentRow: {}, // 当前行
      total: 0,
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 10
      },
      tinymceKey: '',
      remarkDialog: false, // 客户资料
      fileType: '1', // 附件类型(1.图片,2.video,3.word,4.excel,5.pdf,6.其它)
      customerClassify: [],
      customerType: [],
      cooperationStatus: [],
      classifyValue: '',
      cooperationStatusValue: '',
      typeValue: '',
      customerName: '',
      tableData: [],
      multipleSelection: [],
      descriptionDialog: false, // 备注
      descriptionValue: '', // 备注
      isModify: false, // 是否编辑
      modifyDataDialog: false,
      modifyFileList: [],
      modifyDataForm: {
        name: '',
        businessId: '0',
        address: '',
        province: '',
        provinceName: '',
        city: '',
        cityName: '',
        region: '',
        regionName: '',
        town: '',
        townName: '',
        lat: '',
        lng: '',
        linkman: '', // 联系人
        linkPhone: '', // 联系电话
        wxNo: '', // 微信号
        position: '', // 职位
        customerClassify: '', // 客户分类
        customerType: '', // 客户类型
        cooperationStatus: '', // 合作进展
        remark: '', // 客户资料
        categoryIds: [],
        attachmentList: []
      },
      modifyDataRules: {
        name: [
          { required: true, message: '请输入客户名称', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入客户名称', trigger: 'blur' }
        ]
      },
      // 客户分配
      distributionDialog: false,
      distributionValue: '',
      distributionData: [],
      addressOptions: {
        province: [], // 省
        city: [],
        area: [],
        street: [],
        searchAdress: '',
        options: [],
        lat: '',
        lng: '',
        currentCity: ''
      },
      activeName: '1',
      categoryAllList: [] // 所有分类集合
    }
  },
  computed: {
    // tinymceKey() {
    //   return `${this.modifyDataForm.id}${new Date().valueOf()}`
    // },
    fileAccept() {
      let val = ''
      switch (this.fileType) {
        case '1':
          val = '.jpg, .jpeg, .png, .JPG, .JPEG'
          break
        case '2':
          val = '.mp4, .mpeg, .rmvb, .avi, .3gp'
          break
        case '3':
          val = '.doc, .docx, .dot, .dotx, .docm, .dotm'
          break
        case '4':
          val = '.xls, .xlsx'
          break
        case '5':
          val = '.pdf'
          break
        case '6':
          val = ''
          break
      }
      return val
    }
  },
  watch: {
    // fileAccept() {
    //   this.modifyFileList = []
    // }
  },
  created() {
    this.init()
    this.getList()
  },
  methods: {
    handleSearch() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 10
      }
      this.getList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    privewRemark(row) {
      this.remarkDialog = true
      this.currentRow = row
    },
    handleAdd() {
      this.isModify = false
      this.modifyDataDialog = true
      // 省
      provinceList().then(res => {
        this.addressOptions.province = res.data.map(i => {
          return {
            label: i.provinceName,
            value: i.provinceCode,
            lat: i.lat,
            lng: i.lng
          }
        })
      })
      // 课程分类
      getCategoryAll().then(res => {
        this.categoryAllList = res.data
      })
    },
    handleDelete(row) {
      this.$confirm('是否删除此客户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        customerDeleteById({
          id: row.id
        }).then(res => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleAvatarRequest(res) {
      const file = res.file
      const raw = {
        raw: file,
        name: file.name
      }
      this.uploadImgToOss(raw).then(response => {
        const url = response
        const index = file.name.lastIndexOf('.')
        const n = file.name.slice(index)
        let val = ''
        if (n === '.jpg' || n === '.jpeg' || n === '.png' || n === '.JPG' || n === '.JPEG') {
          val = 1
        }
        if (n === '.mp4' || n === '.mpeg' || n === '.rmvb' || n === '.avi' || n === '.3gp') {
          val = 2
        }
        this.modifyDataForm.attachmentList.push({
          'name': file.name,
          'type': val,
          'suffix': n,
          'size': file.size,
          'url': url,
          'uid': file.uid
        })
        // this.modifyFileList.push({
        //   'name': file.name,
        //   'url': url
        // })
      })
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList)
      this.modifyDataForm.attachmentList = fileList
    },
    handlePreview(file) {
      console.log(file)
      window.open(file.url, 'hello')
    },
    // 客户名称检索
    querySearch(queryString, cb) {
      listByCustomerName({
        'name': this.modifyDataForm.name
      }).then(res => {
        const data = res.data
        data.forEach(i => {
          i.value = i.name
        })
        cb(data)
      })
    },
    // 新增客户
    handleCoustmerAdd() {
      if (!this.modifyDataForm.name) {
        return this.$message.error('请填写客户名称')
      }
      const data = Object.assign({}, this.modifyDataForm)
      if (data.categoryIds.length > 0) {
        // 所有子分类
        const categoryArr = []
        this.categoryAllList.forEach(i => {
          categoryArr.push(...i.categories)
        })
        // 选中的子分类对象
        const same = categoryArr.filter(i => {
          return data.categoryIds.indexOf(i.id) !== -1
        })
        // 选中的子分类name
        const categoryNames = same.map(i => {
          return i.name
        })
        data.categoryNames = categoryNames.join(',')
      }
      if (this.modifyDataForm.customerClassify) {
        const customerClassifyName = this.customerClassify.find(i => i.id === data.customerClassify).name
        data.customerClassifyName = customerClassifyName
      }
      if (this.modifyDataForm.customerType) {
        const customerTypeName = this.customerType.find(i => i.id === data.customerType).name
        data.customerTypeName = customerTypeName
      }
      if (this.modifyDataForm.cooperationStatus) {
        const cooperationStatusName = this.cooperationStatus.find(i => i.id === data.cooperationStatus).name
        data.cooperationStatusName = cooperationStatusName
      }
      data.categoryIds = data.categoryIds.join(',')

      if (data.attachmentList.length > 0) {
        data.attachmentList.forEach(i => {
          i.status && delete i.status
          i.uid && delete i.uid
          i.id && delete i.id
        })
      }
      if (this.isModify) {
        customerUpdateById(data).then(ren => {
          this.$message.success('修改成功')
          this.modifyDataDialog = false
          this.getList()
        })
      } else {
        customerAdd(data).then(ren => {
          this.$message.success('新增成功')
          this.modifyDataDialog = false
          this.getList()
        })
      }
    },
    closeModify() {
      this.modifyDataForm = {
        name: '',
        businessId: '0',
        address: '',
        province: '',
        provinceName: '',
        city: '',
        cityName: '',
        region: '',
        regionName: '',
        town: '',
        townName: '',
        lat: '',
        lng: '',
        linkman: '', // 联系人
        linkPhone: '', // 联系电话
        wxNo: '', // 微信号
        position: '', // 职位
        customerClassify: '', // 客户分类
        customerType: '', // 客户类型
        cooperationStatus: '', // 合作进展
        remark: '', // 客户资料
        categoryIds: [],
        attachmentList: []
      }
    },
    handleModify(row) {
      this.isModify = true
      this.modifyDataDialog = true
      customerGetById({ id: row.id }).then(res => {
        const { data } = res
        this.modifyFileList = data.attachmentList
        this.modifyDataForm = data
        this.modifyDataForm.remark = data.remark
        this.modifyDataForm.attachmentList = data.attachmentList || []
        this.modifyDataForm.categoryIds = data.categoryIds.split(',')
      })
      // 课程分类
      getCategoryAll().then(res => {
        this.categoryAllList = res.data
      })
      // 省
      provinceList().then(res => {
        this.addressOptions.province = res.data.map(i => {
          return {
            label: i.provinceName,
            value: i.provinceCode,
            lat: i.lat,
            lng: i.lng
          }
        })
      })
      // 市
      cityList({
        pid: row.province
      }).then(res => {
        this.addressOptions.city = res.data.map(i => {
          return {
            label: i.cityName,
            value: i.cityCode,
            lat: i.lat,
            lng: i.lng
          }
        })
      })
      areaList({
        pid: row.city
      }).then(res => {
        this.addressOptions.area = res.data.map(i => {
          return {
            label: i.areaName,
            value: i.areaCode,
            lat: i.lat,
            lng: i.lng
          }
        })
      })
      streetList({
        pid: row.region
      }).then(res => {
        this.addressOptions.street = res.data.map(i => {
          return {
            label: i.streetName,
            value: i.streetCode,
            lat: i.lat,
            lng: i.lng
          }
        })
      })
    },
    // 添加备注
    handleDescription(row) {
      this.descriptionDialog = true
      this.currentRow = row
    },
    // 添加备注提交
    confirmDescription() {
      customerDescription({
        'id': this.currentRow.id,
        'description': this.descriptionValue
      }).then(res => {
        this.$message.success('添加成功')
        this.descriptionDialog = false
        this.getList()
      })
    },
    allDistribution() {
      if (this.multipleSelection.length <= 0) {
        return this.$message.error('请先选择客户')
      }
      customerGetUsers({
        orgId: 0
      }).then(res => {
        this.distributionData = res.data
      })
      this.distributionDialog = true
    },
    // 客户分配
    customerDistribution(row) {
      this.currentRow = row
      this.multipleSelection = [row]
      this.distributionDialog = true
      customerGetUsers({
        orgId: 0
      }).then(res => {
        this.distributionData = res.data
      })
    },
    // 客户分配提交
    confirmDistribution() {
      if (!this.distributionValue) {
        this.$message.error('请选择员工')
        return
      }
      const user = this.distributionData.find(i => i.userId === this.distributionValue)
      const ids = this.multipleSelection.map(i => {
        return i.id
      })
      customerBatchAdd({
        'businessId': '0',
        'userId': user.userId,
        'userName': user.realName,
        'customerIds': ids
      }).then(res => {
        this.$message.success('分配成功')
        this.distributionDialog = false
        this.getList()
      })
    },
    getRowKey(row) {
      return row.id
    },
    // 解除分配
    allDeleteDistribution() {
      if (this.multipleSelection.length <= 0) {
        return this.$message.error('请先选择客户')
      }
      const ids = this.multipleSelection.map(i => {
        return i.id
      })
      deleteBatchByCustomerIds({
        customerIds: ids.join(',')
      }).then(res => {
        this.$message.success('解除分配成功')
        this.$refs.multipleTable.clearSelection()
        this.getList()
      })
    },
    // 解除分配
    deleteDistribution(row) {
      this.currentRow = row
      deleteBatchByCustomerIds({
        customerIds: row.id
      }).then(res => {
        this.$message.success('解除分配成功')
        this.$refs.multipleTable.clearSelection()
        this.getList()
      })
    },
    // 关闭客户分配事件
    closeDistribution() {
      this.distributionValue = ''
      this.$refs.multipleTable.clearSelection()
      // this.multipleSelection = []
    },
    handleVisit(row) {
      this.$router.push({
        path: '/customer/visit',
        query: {
          id: row.id
        }
      })
    },
    // 省
    provinceChange(v) {
      this.modifyDataForm.city = null
      this.modifyDataForm.region = null
      this.modifyDataForm.town = null
      cityList({
        pid: v
      }).then(res => {
        this.addressOptions.city = res.data.map(i => {
          return {
            label: i.cityName,
            value: i.cityCode,
            lat: i.lat,
            lng: i.lng
          }
        })
      })
    },
    // 市
    cityChange(v) {
      this.modifyDataForm.region = null
      this.modifyDataForm.town = null
      areaList({
        pid: v
      }).then(res => {
        this.addressOptions.area = res.data.map(i => {
          return {
            label: i.areaName,
            value: i.areaCode,
            lat: i.lat,
            lng: i.lng
          }
        })
      })
    },
    // 区
    areaChange(v) {
      this.modifyDataForm.town = null
      streetList({
        pid: v
      }).then(res => {
        this.addressOptions.street = res.data.map(i => {
          return {
            label: i.streetName,
            value: i.streetCode,
            lat: i.lat,
            lng: i.lng
          }
        })
      })
      const s = this.addressOptions.province.find(i => i.value === this.modifyDataForm.province).label
      const c = this.addressOptions.city.find(i => i.value === this.modifyDataForm.city).label
      const q = this.addressOptions.area.find(i => i.value === this.modifyDataForm.region).label
      this.modifyDataForm.provinceName = s
      this.modifyDataForm.cityName = c
      this.modifyDataForm.regionName = q
    },
    // 街道
    streetChange(v) {
      const s = this.addressOptions.province.find(i => i.value === this.modifyDataForm.province).label
      const c = this.addressOptions.city.find(i => i.value === this.modifyDataForm.city).label
      const q = this.addressOptions.area.find(i => i.value === this.modifyDataForm.region).label
      const j = this.addressOptions.street.find(i => i.value === v).label
      this.modifyDataForm.provinceName = s
      this.modifyDataForm.cityName = c
      this.modifyDataForm.regionName = q
      this.modifyDataForm.townName = j
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.currentPage = val
      this.getList()
    },
    getList() {
      customerPageList({
        'name': this.customerName,
        'customerClassify': this.classifyValue,
        'customerType': this.typeValue,
        'cooperationStatus': this.cooperationStatusValue,
        'currentPage': this.listQuery.currentPage,
        'pageSize': this.listQuery.pageSize,
        'businessId': '0'
      }).then(res => {
        const { records, total } = res.data
        this.tableData = records
        this.total = total
      })
    },
    init() {
      // 客户分类
      customerClassifyList({
        businessId: '0'
      }).then(res => {
        this.customerClassify = res.data
      })
      // 客户类型
      customerTypeList({
        businessId: '0'
      }).then(res => {
        this.customerType = res.data
      })
      // 合作状态
      customerCooperationList({
        businessId: '0'
      }).then(res => {
        this.cooperationStatus = res.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .operation{
    line-height: 40px;
  }
  .remark{
    width: 100%;
    img{
      width:100% ;
    }
  }
</style>
